<template>
  <div class="data-analysis-form-container">

  <el-form  label-width="120px" v-model="form" class="flex-container" :label-position="'top'">
    <div class="flex-item">
    <el-form-item label="请选择数据集" >
      <el-select  placeholder="please select your resultSet" v-model="form.taskId" @change="handleSelectChange" clearable>
        <el-option :key="option.taskId" :label="option.name" :value="option.taskId" v-for="option in resultSetForm"/>
      </el-select>
    </el-form-item>

    <el-form-item label="请输入数据分析图的名字" label-width="120px">
      <el-input v-model="form.name" style="width: 178px" placeholder="请输入数据分析图的名字"  />
    </el-form-item>

    <el-form-item label="请选择数据分析图的类型">
      <el-select v-model="form.type" placeholder="please select your type">
        <el-option label="饼图" value="pie" />
        <el-option label="柱状图" value="bar" />
        <el-option label="折线图" value="line" />
        <el-option label="散点图" value="scatter" />
      </el-select>
    </el-form-item>
    <el-form-item label="请选择x轴字段或者名称字段" >
      <el-select v-model="form.xAxis"  placeholder="please select your Field">
        <el-option :key="option" :label="option" :value="option" v-for="option in fields"/>
      </el-select>
    </el-form-item>

    <el-form-item label="请选择y轴字段或者数值字段" >
      <el-select v-model="form.yAxis"  placeholder="please select your Field">
        <el-option :key="option" :label="option" :value="option" v-for="option in fields"/>
      </el-select>
    </el-form-item>

    </div>
    <div class="flex-item">

      <el-form-item label="是否采用数据处理后的数据集">
        <el-radio-group v-model="form.isFilter">
          <el-radio label="启用" value= true />
          <el-radio label="不启用" value= false />
        </el-radio-group>
      </el-form-item>

      <el-button class="mb-4" style="width: 178px" @click="showAddFilterRules = true">
        增加过滤条件
      </el-button>

    <el-form-item label="请选择排序字段" >
      <el-select v-model="form.sortRules.field"  placeholder="please select your Field">
        <el-option :key="option" :label="option" :value="option" v-for="option in fields"/>
      </el-select>
    </el-form-item>
    <el-form-item label="请选择排序方式" >
      <el-select v-model="form.sortRules.order"  placeholder="please select your order">
        <el-option label="升序" value="asc" />
        <el-option label="降序" value="desc" />
      </el-select>
    </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onCancel">清空</el-button>
      </el-form-item>
    </div>


  </el-form>
  </div>

  <el-drawer v-model="showAddFilterRules"  :with-header="false">
    <el-form
        :label-position="'top'"
        :model="form.filterRules"
        v-for="(item, index) in form.filterRules" :key="index"
    >
      <el-form-item
          label="请选择需要数据筛选的字段">
        <el-select v-model="item.field"  placeholder="please select your field">
          <el-option :key="option" :label="option" :value="option" v-for="option in fields"/>
        </el-select>
      </el-form-item>
      <el-form-item
          label="请选择筛选条件">
        <el-select v-model="item.condition"  placeholder="please select your condition">
          <el-option label="等于" value="=" />
          <el-option label="不等于" value="!=" />
          <el-option label="大于" value=">" />
          <el-option label="小于" value="<" />
          <el-option label="大于等于" value=">=" />
          <el-option label="小于等于" value="<=" />
        </el-select>
      </el-form-item>
      <el-form-item
          label="请输入筛选值">
        <el-input v-model="item.filterValue"  style="width: 178px" placeholder="请输入筛选值" />
      </el-form-item>
      <el-button class="mb-4" @click.prevent="removeFilterRules(item)"
      >Delete</el-button
      >
    </el-form>
    <el-button class="mb-4" @click.prevent="addFilterRules()">
      Add
    </el-button>
  </el-drawer>

<div >
  <div id="myChart" class="echarts-container" >
  </div>
</div>
</template>

<script setup >

import {doGet, doPost} from "~/api/index.js";
import {nextTick, onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import * as echarts from 'echarts';
import {transform} from "windicss/helpers";


const resultSetForm = ref([])

const fields=ref([])

const showAddFilterRules = ref(false)

const echartsContainer = ref(null);

const backData = ref({})

const form=reactive({
  taskId:null,
  isFilter:null,
  type:null,
  name:null,
  xAxis:null,
  yAxis:null,
  filterRules:[
    {
      field:null,
      condition:null,
      filterValue:null
    }
  ],
  sortRules: {
    field:null,
    order:null
  },
})

onMounted(async() => {
  // 在组件挂载到页面之后执行的逻辑
  // 可以在这里调用加载数据的函数
  await loadData();
  // drawLine();
});
const removeFilterRules = (item) =>{
  const index = form.filterRules.indexOf(item)
  if (index !== -1) {
    form.filterRules.splice(index, 1)
  }
}
const addFilterRules = () => {
  form.filterRules.push({
    field:null,
    condition:null,
    filterValue:null
  })
}
const onSubmit = () => {
  if (form.taskId===null||form.type===null||form.name===null||form.xAxis===null||form.yAxis===null){
    ElMessage({
      message: '请配置数据集或操作的参数',
      type: 'warning',
    })
  }else {
    doPost("/api/visualization/visualization",form,resp=>{
      if (resp.code===1){

        ElMessage({
          message: "正在绘制中，请稍后",
          type: 'success',
        })

        backData.value = resp.data;
        drawLine();
      }
      else if (resp.code===3) {
        ElMessage({
          message: resp.msg,
          type: 'error',
        })
      }
    })
  }
}

const handleSelectChange = () => {

  // 这个函数会在选择框的值发生变化时触发
  if (resultSetForm.value) {
    onCancel();
    callbackFunction(form.taskId);
  }
};

const callbackFunction = (taskId) => {
  // 在这里编写你的回调函数的逻辑
  doGet("/api/visualization/getFields?taskId="+taskId,null,resp=>{
    fields.value=resp.data
  })
}

const loadData=async ()=>{
  await doGet("/api/visualization/list",null,resp=>{
    resultSetForm.value=resp.data
  })
}
//清空表单内容
const onCancel=()=>{
  form.isFilter=null;
  form.type=null;
  form.name=null;
  form.xAxis=null;
  form.yAxis=null;
  form.filterRules.length = 1;
  form.filterRules.forEach(rule=>{
    rule.field=null;
    rule.condition=null;
    rule.filterValue=null;
  });
  form.sortRules.field=null;
  form.sortRules.order=null;
}

//echarts图表绘制通用函数
function drawLine()  {

// 根据图表类型设置相应的 series 配置
  let seriesOption;
  switch (backData.value.type) {
    case 'bar':
      seriesOption = {
        type: 'bar',
        encode: { x: backData.value.xAxis, y: backData.value.yAxis },
        datasetIndex: 0
      };
      break;
    case 'pie':
      seriesOption = {
        type: 'pie',
        radius: '50%',
        encode: { itemName: backData.value.xAxis, value: backData.value.yAxis },
        datasetIndex: 0
      };
      break;
    case 'line':
      seriesOption = {
        type: 'line',
        encode: { x: backData.value.xAxis, y: backData.value.yAxis },
        datasetIndex: 0
      };
      break;
    case 'scatter':
      seriesOption = {
        type: 'scatter',
        encode: { x: backData.value.xAxis, y: backData.value.yAxis },
        datasetIndex: 0
      };
      break;
    default:
      // 默认为柱状图
      seriesOption = {
        type: 'bar',
        encode: { x: backData.value.xAxis, y: backData.value.yAxis },
        datasetIndex: 0
      };
  }

  const myChart = echarts.init(document.getElementById('myChart'), { passive: true });
  const option = {
    title: {
      text: backData.value.name,
      left: 'center',
      top: 20,
      textStyle: {
        fontSize: 18,
      },
    },
    dataset: [
      {

        source: backData.value.source
      }
    ],
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      axisLabel: { interval: 0, rotate: 30 }
    },
    yAxis: {},
    series: [ seriesOption ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
  }

  myChart.setOption(option);
}



</script>

<style scoped>
.echarts-container {
  width: 100%;
  height: 500px;
  margin: 20px auto;

}
.data-analysis-form-container {
  max-width: 800px; /* 设置最大宽度以提高可读性 */
  margin: 20px auto; /* 居中显示表单 */
  padding: 20px; /* 为间距添加内边距 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加轻微的阴影 */
  border-radius: 8px; /* 添加圆角 */
}

.flex-container {
  display: flex;
  justify-content: space-between; /* 使用 Flex 布局，均匀分配空间 */
}

.flex-item {
  flex: 1; /* 均匀分配两列的宽度 */
  margin-right: 20px; /* 为右侧列添加一些间距 */
}

.el-form-item {
  margin-bottom: 15px; /* 增加表单项之间的间距 */
}

.el-button {
  margin-right: 10px; /* 在按钮之间添加间距 */
}
</style>